<template>
  <div class="form-generator-container">
    <VanFormGenerator
      ref="vanFormGenerator"
      :form-generator="formGenerator"
      @collectInfo="(value) => triggerEvent('collectInfo', value)"
      @validate="(value) => triggerEvent('validate', value)"
      @generator="(value) => triggerEvent('generator', value)"
      @action="(value) => triggerEvent('action', value)"
    />
  </div>
</template>

<script>
import VanFormGenerator from './index'

export default {
  name: 'Generator',

  components: {
    VanFormGenerator,
  },

  props: {
    formGenerator: {
      type: Object,
      default: () => ({
        name: '',
        generator: [],
      }),
    },
  },

  computed: {
    // 表单生成
    vanFormGenerator () {
      return this
    },

    // refs
    refGenerator () {
      return this.$refs.vanFormGenerator
    },

    // 元素查找
    components () {
      return this.refGenerator.components
    },

    // 信息收集
    collectInfo () {
      return this.refGenerator.collectInfo
    },
  },

  provide () {
    return {
      $$parent: this.vanFormGenerator,
    }
  },

  methods: {
    // 事件
    triggerEvent (event, value) {
      this.$emit(event, value)
    },

    // 表单验证
    validate () {
      return this.refGenerator.validate()
    },

    // elements
    getElements () {
      return this.$refs.vanFormGenerator.getElements()
    },
  },
}
</script>
